theme.css (54600B)
1 /* @settings 2 3 name: GitHub Flavored Markdown Settings 4 id: github-flavored-markdown-theme 5 settings: 6 - 7 id: general 8 title: General 9 type: heading 10 level: 1 11 collapsed: true 12 - 13 id: accent 14 title: Accent Color 15 type: variable-themed-color 16 format: hex 17 opacity: false 18 default-light: '#0969da' 19 default-dark: '#4493f8' 20 - 21 # Colorblind 22 23 id: colorblind 24 title: Colorblind variants 25 type: heading 26 level: 1 27 collapsed: true 28 - 29 id: colorblind_protan-deutan 30 title: Protanopia & Deuteranopia 31 type: class-toggle 32 - 33 id: colorblind_tritan 34 title: Tritanopia 35 type: class-toggle 36 - 37 # Kanban Settings 38 39 id: kanban 40 title: Kanban 41 type: heading 42 level: 1 43 collapsed: true 44 - 45 id: kanban-variant 46 title: Kanban variant 47 description: Variations of Kanban styles 48 type: class-select 49 allowEmpty: false 50 default: kanban-full 51 options: 52 - 53 label: GitHub projects style 54 value: kanban-full 55 - 56 label: Minimal style 57 value: kanban-on 58 - 59 label: Disable styles 60 value: kanban-off 61 - 62 id: kanban-same-height-cards 63 title: Minimal height for cards 64 description: All cards will have the same initial height 65 type: class-toggle 66 default: true 67 - 68 id: kanban-full-height-column 69 title: Full height lists 70 description: 71 type: class-toggle 72 default: true 73 */ 74 75 body { 76 /* Animations */ 77 --anim-duration-none: 0; 78 --anim-duration-superfast: 70ms; 79 --anim-duration-fast: 140ms; 80 --anim-duration-moderate: 300ms; 81 --anim-duration-slow: 560ms; 82 --anim-motion-smooth: cubic-bezier(0.45, 0.05, 0.55, 0.95); 83 --anim-motion-delay: cubic-bezier(0.65, 0.05, 0.36, 1); 84 --anim-motion-jumpy: cubic-bezier(0.68, -0.55, 0.27, 1.55); 85 --anim-motion-swing: cubic-bezier(0, 0.55, 0.45, 1); 86 87 /* Blockquotes */ 88 --blockquote-border-thickness: 2px; 89 --blockquote-border-color: var(--interactive-accent); 90 --blockquote-font-style: normal; 91 --blockquote-color: var(--text-muted); 92 --blockquote-background-color: transparent; 93 94 /* Bold */ 95 --bold-weight: var(--font-semibold); 96 --bold-color: inherit; 97 98 /* Borders */ 99 --border-width: 1px; 100 101 /* Buttons */ 102 --button-radius: var(--input-radius); 103 104 /* Callouts */ 105 --callout-border-width: 0px; 106 --callout-border-opacity: 0.25; 107 --callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6); 108 --callout-radius: var(--radius-s); 109 --callout-blend-mode: var(--highlight-mix-blend-mode); 110 --callout-title-color: inherit; 111 --callout-title-padding: 0; 112 --callout-title-size: inherit; 113 --callout-content-padding: 0; 114 --callout-content-background: transparent; 115 --callout-bug: var(--color-red-rgb); 116 --callout-default: var(--color-blue-rgb); 117 --callout-error: var(--color-red-rgb); 118 --callout-example: var(--color-purple-rgb); 119 --callout-fail: var(--color-red-rgb); 120 --callout-important: var(--color-cyan-rgb); 121 --callout-info: var(--color-blue-rgb); 122 --callout-question: var(--color-yellow-rgb); 123 --callout-success: var(--color-green-rgb); 124 --callout-summary: var(--color-cyan-rgb); 125 --callout-tip: var(--color-cyan-rgb); 126 --callout-todo: var(--color-blue-rgb); 127 --callout-warning: var(--color-orange-rgb); 128 --callout-quote: 158, 158, 158; 129 130 /* Canvas */ 131 --canvas-background: var(--background-primary); 132 --canvas-card-label-color: var(--text-faint); 133 --canvas-color-1: var(--color-red-rgb); 134 --canvas-color-2: var(--color-orange-rgb); 135 --canvas-color-3: var(--color-yellow-rgb); 136 --canvas-color-4: var(--color-green-rgb); 137 --canvas-color-5: var(--color-cyan-rgb); 138 --canvas-color-6: var(--color-purple-rgb); 139 --canvas-dot-pattern: var(--color-base-30); 140 141 /* Checkboxes */ 142 --checkbox-radius: var(--radius-s); 143 --checkbox-size: var(--font-text-size); 144 --checkbox-marker-color: var(--background-primary); 145 --checkbox-color: var(--interactive-accent); 146 --checkbox-color-hover: var(--interactive-accent-hover); 147 --checkbox-border-color: var(--text-faint); 148 --checkbox-border-color-hover: var(--text-muted); 149 --checklist-done-decoration: line-through; 150 --checklist-done-color: var(--text-muted); 151 152 /* Code */ 153 --code-white-space: pre-wrap; 154 --code-size: var(--font-smaller); 155 --code-background: var(--background-primary-alt); 156 --code-normal: var(--text-muted); 157 --code-comment: var(--text-faint); 158 --code-function: var(--color-orange); 159 --code-important: var(--color-orange); 160 --code-keyword: var(--color-red); 161 --code-property: var(--color-blue); 162 --code-punctuation: var(--text-muted); 163 --code-string: var(--color-cyan); 164 --code-tag: var(--color-red); 165 --code-value: var(--color-purple); 166 167 /* Collapse icons */ 168 --collapse-icon-color: var(--text-faint); 169 --collapse-icon-color-collapsed: var(--text-accent); 170 171 /* Cursor */ 172 --cursor: default; 173 --cursor-link: pointer; 174 175 /* Dialogs - e.g. small modals, confirmations */ 176 --dialog-width: 560px; 177 --dialog-max-width: 80vw; 178 --dialog-max-height: 85vh; 179 180 /* Dividers — between panes */ 181 --divider-color: var(--background-modifier-border); 182 --divider-color-hover: var(--interactive-accent); 183 --divider-width: 1px; 184 --divider-width-hover: 3px; 185 --divider-vertical-height: calc(100% - var(--header-height)); 186 187 /* Dragging */ 188 --drag-ghost-background: rgb(0 0 0 / 85%); 189 --drag-ghost-text-color: #fff; 190 191 /* Embeds */ 192 --embed-max-height: 4000px; 193 --embed-canvas-max-height: 400px; 194 --embed-background: inherit; 195 --embed-border-left: 2px solid var(--interactive-accent); 196 --embed-border-right: none; 197 --embed-border-top: none; 198 --embed-border-bottom: none; 199 --embed-padding: 0 0 0 var(--size-4-6); 200 --embed-font-style: inherit; 201 202 /* Blocks */ 203 --embed-block-shadow-hover: 204 0 0 0 1px var(--background-modifier-border), inset 0 0 0 1px var(--background-modifier-border); 205 206 /* File layout */ 207 --file-line-width: 700px; 208 --file-folding-offset: 24px; 209 --file-margins: var(--size-4-8); 210 --file-header-font-size: var(--font-ui-small); 211 --file-header-font-weight: 400; 212 --file-header-border: var(--border-width) solid transparent; 213 --file-header-justify: center; 214 215 /* Relative font sizes */ 216 --font-smallest: 0.8em; 217 --font-smaller: 0.875em; 218 --font-small: 0.933em; 219 220 /* UI font sizes */ 221 --font-ui-smaller: 12px; 222 --font-ui-small: 13px; 223 --font-ui-medium: 15px; 224 --font-ui-large: 20px; 225 226 /* Font weights */ 227 --font-thin: 100; 228 --font-extralight: 200; 229 --font-light: 300; 230 --font-normal: 400; 231 --font-medium: 500; 232 --font-semibold: 600; 233 --font-bold: 700; 234 --font-extrabold: 800; 235 --font-black: 900; 236 237 /* Footnotes */ 238 --footnote-size: var(--font-smaller); 239 240 /* Graphs */ 241 --graph-controls-width: 240px; 242 --graph-text: var(--text-normal); 243 --graph-line: var(--color-base-35, var(--background-modifier-border-focus)); 244 --graph-node: var(--text-muted); 245 --graph-node-unresolved: var(--text-faint); 246 --graph-node-focused: var(--text-accent); 247 --graph-node-tag: var(--color-green); 248 --graph-node-attachment: var(--color-yellow); 249 250 /* Headings */ 251 --heading-formatting: var(--text-faint); 252 --h1-color: var(--text-normal); 253 --h2-color: var(--text-normal); 254 --h3-color: var(--text-normal); 255 --h4-color: var(--text-normal); 256 --h5-color: var(--text-normal); 257 --h6-color: var(--text-normal); 258 --h1-font: inherit; 259 --h2-font: inherit; 260 --h3-font: inherit; 261 --h4-font: inherit; 262 --h5-font: inherit; 263 --h6-font: inherit; 264 --h1-line-height: 1.2; 265 --h2-line-height: 1.2; 266 --h3-line-height: 1.3; 267 --h4-line-height: 1.4; 268 --h5-line-height: var(--line-height-normal); 269 --h6-line-height: var(--line-height-normal); 270 --h1-size: 2em; 271 --h2-size: 1.5em; 272 --h3-size: 1.25em; 273 --h4-size: 1em; 274 --h5-size: 0.875em; 275 --h6-size: 0.85em; 276 --h1-style: normal; 277 --h2-style: normal; 278 --h3-style: normal; 279 --h4-style: normal; 280 --h5-style: normal; 281 --h6-style: normal; 282 --h1-variant: normal; 283 --h2-variant: normal; 284 --h3-variant: normal; 285 --h4-variant: normal; 286 --h5-variant: normal; 287 --h6-variant: normal; 288 --h1-weight: 700; 289 --h2-weight: 600; 290 --h3-weight: 600; 291 --h4-weight: 600; 292 --h5-weight: 600; 293 --h6-weight: 600; 294 295 /* View header */ 296 --header-height: 40px; 297 298 /* Horizontal rules */ 299 --hr-color: var(--background-modifier-border); 300 --hr-thickness: 2px; 301 302 /* Icons */ 303 --icon-size: var(--icon-s); 304 --icon-stroke: var(--icon-m-stroke-width); 305 --icon-xs: 14px; 306 --icon-s: 16px; 307 --icon-m: 18px; 308 --icon-l: 18px; 309 --icon-xl: 32px; 310 --icon-xs-stroke-width: 2px; 311 --icon-s-stroke-width: 2px; 312 --icon-m-stroke-width: 1.75px; 313 --icon-l-stroke-width: 1.75px; 314 --icon-xl-stroke-width: 1.25px; 315 --icon-color: var(--text-muted); 316 --icon-color-hover: var(--text-muted); 317 --icon-color-active: var(--text-accent); 318 --icon-color-focused: var(--text-normal); 319 --icon-opacity: 0.85; 320 --icon-opacity-hover: 1; 321 --icon-opacity-active: 1; 322 --clickable-icon-radius: var(--radius-s); 323 324 /* Indentation guide */ 325 --indentation-guide-width: 1px; 326 --indentation-guide-color: rgb(var(--mono-rgb-100), 0.12); 327 --indentation-guide-color-active: rgb(var(--mono-rgb-100), 0.3); 328 329 /* Inline title */ 330 --inline-title-color: var(--h1-color); 331 --inline-title-font: var(--h1-font); 332 --inline-title-line-height: var(--h1-line-height); 333 --inline-title-size: var(--h1-size); 334 --inline-title-style: var(--h1-style); 335 --inline-title-variant: var(--h1-variant); 336 --inline-title-weight: var(--h1-weight); 337 --inline-title-margin-bottom: 0.5em; 338 339 /* Inputs */ 340 --input-height: 30px; 341 --input-radius: 5px; 342 --input-font-weight: var(--font-normal); 343 --input-border-width: 1px; 344 345 /* Italic */ 346 --italic-color: inherit; 347 --italic-weight: inherit; 348 349 /* Z-index */ 350 --layer-cover: 5; 351 --layer-sidedock: 10; 352 --layer-status-bar: 15; 353 --layer-popover: 30; 354 --layer-slides: 45; 355 --layer-modal: 50; 356 --layer-notice: 60; 357 --layer-menu: 65; 358 --layer-tooltip: 70; 359 --layer-dragged-item: 80; 360 361 /* Line heights */ 362 --line-height-normal: 1.5; 363 --line-height-tight: 1.3; 364 365 /* Links */ 366 --link-color: var(--text-accent); 367 --link-color-hover: var(--text-accent-hover); 368 --link-decoration: none; 369 --link-decoration-hover: underline; 370 --link-decoration-thickness: auto; 371 --link-external-color: var(--text-accent); 372 --link-external-color-hover: var(--text-accent-hover); 373 --link-external-decoration: none; 374 --link-external-decoration-hover: underline; 375 --link-external-filter: none; 376 --link-unresolved-color: var(--text-accent); 377 --link-unresolved-opacity: 0.7; 378 --link-unresolved-filter: none; 379 --link-unresolved-decoration-style: solid; 380 --link-unresolved-decoration-color: hsl(var(--interactive-accent-hsl), 0.3); 381 382 /* Lists */ 383 --list-indent: 2em; 384 --list-spacing: 0.075em; 385 --list-marker-color: var(--text-normal); 386 --list-marker-color-hover: var(--text-muted); 387 --list-marker-color-collapsed: var(--text-accent); 388 --list-bullet-border: none; 389 --list-bullet-radius: 50%; 390 --list-bullet-size: 5px; 391 --list-bullet-transform: none; 392 --list-numbered-style: decimal; 393 394 /* File navigator */ 395 --nav-item-size: var(--font-ui-small); 396 --nav-item-color: var(--text-muted); 397 --nav-item-color-hover: var(--text-normal); 398 --nav-item-color-active: var(--text-normal); 399 --nav-item-color-selected: var(--text-normal); 400 --nav-item-color-highlighted: var(--text-accent-hover); 401 --nav-item-background-hover: var(--background-modifier-hover); 402 --nav-item-background-active: var(--background-modifier-active); 403 --nav-item-background-selected: hsl(var(--color-accent-hsl), 0.2); 404 --nav-item-padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-6); 405 --nav-item-parent-padding: var(--nav-item-padding); 406 --nav-item-children-padding-left: var(--size-2-2); 407 --nav-item-children-margin-left: var(--size-4-3); 408 --nav-item-weight: inherit; 409 --nav-item-weight-hover: inherit; 410 --nav-item-weight-active: inherit; 411 --nav-item-white-space: nowrap; 412 --nav-indentation-guide-width: var(--indentation-guide-width); 413 --nav-indentation-guide-color: var(--indentation-guide-color); 414 --nav-collapse-icon-color: var(--collapse-icon-color); 415 --nav-collapse-icon-color-collapsed: var(--text-faint); 416 417 /* Modals - e.g. settings, community themes, community plugins */ 418 --modal-background: var(--background-primary); 419 --modal-width: 90vw; 420 --modal-height: 85vh; 421 --modal-max-width: 1100px; 422 --modal-max-height: 1000px; 423 --modal-max-width-narrow: 800px; 424 --modal-border-width: var(--border-width); 425 --modal-border-color: var(--color-base-30, var(--background-modifier-border-focus)); 426 --modal-radius: var(--radius-l); 427 --modal-community-sidebar-width: 280px; 428 429 /* PDF view */ 430 --pdf-background: var(--background-primary); 431 --pdf-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 2px 8px rgb(0 0 0 / 10%); 432 --pdf-spread-shadow: 0 0 0 1px rgb(0 0 0 / 5%); 433 --pdf-sidebar-background: var(--background-primary); 434 --pdf-thumbnail-shadow: 0 0 0 1px rgb(0 0 0 / 15%), 0 2px 8px rgb(0 0 0 / 20%); 435 436 /* Popovers - file previews */ 437 --popover-width: 450px; 438 --popover-height: 400px; 439 --popover-max-height: 70vh; 440 --popover-pdf-width: 600px; 441 --popover-pdf-height: 800px; 442 --popover-font-size: var(--font-text-size); 443 444 /* Prompts - e.g. quick switcher, command palette */ 445 --prompt-width: 700px; 446 --prompt-max-width: 80vw; 447 --prompt-max-height: 70vh; 448 --prompt-border-width: var(--border-width); 449 --prompt-border-color: var(--color-base-40, var(--background-modifier-border-focus)); 450 451 /* Radiuses */ 452 --radius-s: 4px; 453 --radius-m: 8px; 454 --radius-l: 12px; 455 --radius-xl: 16px; 456 457 /* Ribbon */ 458 --ribbon-background: var(--background-secondary); 459 --ribbon-background-collapsed: var(--background-primary); 460 --ribbon-width: 44px; 461 --ribbon-padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); 462 463 /* Scrollbars */ 464 --scrollbar-active-thumb-bg: rgb(var(--mono-rgb-100), 0.2); 465 --scrollbar-bg: rgb(var(--mono-rgb-100), 0.05); 466 --scrollbar-thumb-bg: rgb(var(--mono-rgb-100), 0.1); 467 468 /* Search */ 469 --search-clear-button-color: var(--text-muted); 470 --search-clear-button-size: 13px; 471 --search-icon-color: var(--text-muted); 472 --search-icon-size: 18px; 473 --search-result-background: var(--background-primary); 474 475 /* Layout sizing - for padding and margins */ 476 --size-2-1: 2px; 477 --size-2-2: 4px; 478 --size-2-3: 6px; 479 --size-4-1: 4px; 480 --size-4-2: 8px; 481 --size-4-3: 12px; 482 --size-4-4: 16px; 483 --size-4-5: 20px; 484 --size-4-6: 24px; 485 --size-4-8: 32px; 486 --size-4-9: 36px; 487 --size-4-12: 48px; 488 --size-4-16: 64px; 489 --size-4-18: 72px; 490 491 /* Sidebar */ 492 --sidebar-markdown-font-size: calc(var(--font-text-size) * 0.9); 493 --sidebar-tab-text-display: none; 494 495 /* Sliders */ 496 --slider-thumb-border-width: 1px; 497 --slider-thumb-border-color: var(--background-modifier-border-hover); 498 --slider-thumb-height: 18px; 499 --slider-thumb-width: 18px; 500 --slider-thumb-y: -6px; 501 --slider-thumb-radius: 50%; 502 --slider-s-thumb-size: 15px; 503 --slider-s-thumb-position: -5px; 504 --slider-track-background: var(--background-modifier-border); 505 --slider-track-height: 3px; 506 507 /* Status bar */ 508 --status-bar-background: var(--background-secondary); 509 --status-bar-border-color: var(--divider-color); 510 --status-bar-border-width: 1px 0 0 1px; 511 --status-bar-font-size: var(--font-ui-smaller); 512 --status-bar-text-color: var(--text-muted); 513 --status-bar-position: fixed; 514 --status-bar-radius: var(--radius-m) 0 0 0; 515 --status-bar-scroll-padding: calc(var(--status-bar-font-size) + 18px); 516 517 /* Swatch for color inputs */ 518 --swatch-radius: 14px; 519 --swatch-height: 24px; 520 --swatch-width: 24px; 521 --swatch-shadow: inset 0 0 0 1px rgb(var(--mono-rgb-100), 0.15); 522 523 /* Tabs */ 524 --tab-background-active: var(--background-primary); 525 --tab-text-color: var(--text-faint); 526 --tab-text-color-active: var(--text-muted); 527 --tab-text-color-focused: var(--text-muted); 528 --tab-text-color-focused-active: var(--text-muted); 529 --tab-text-color-focused-highlighted: var(--text-accent); 530 --tab-text-color-focused-active-current: var(--text-normal); 531 --tab-font-size: var(--font-ui-small); 532 --tab-font-weight: inherit; 533 --tab-container-background: var(--background-secondary); 534 --tab-divider-color: var(--background-modifier-border-hover); 535 --tab-outline-color: var(--divider-color); 536 --tab-outline-width: 1px; 537 --tab-curve: 6px; 538 --tab-radius: var(--radius-s); 539 --tab-radius-active: 6px 6px 0 0; 540 --tab-width: 200px; 541 --tab-max-width: 320px; 542 543 /* Stacked tabs */ 544 --tab-stacked-pane-width: 700px; 545 --tab-stacked-header-width: var(--header-height); 546 --tab-stacked-font-size: var(--font-ui-small); 547 --tab-stacked-font-weight: 400; 548 --tab-stacked-text-align: left; 549 --tab-stacked-text-transform: rotate(0deg); 550 --tab-stacked-text-writing-mode: vertical-lr; 551 --tab-stacked-shadow: -8px 0 8px 0 rgb(0 0 0 / 5%); 552 553 /* Tables */ 554 --table-background: transparent; 555 --table-border-width: 1px; 556 --table-border-color: var(--background-modifier-border); 557 --table-white-space: normal; 558 --table-header-background: var(--table-background); 559 --table-header-background-hover: inherit; 560 --table-header-border-width: var(--table-border-width); 561 --table-header-border-color: var(--table-border-color); 562 --table-header-font: inherit; 563 --table-header-size: var(--font-text-size); 564 --table-header-weight: var(--bold-weight); 565 --table-header-color: var(--text-normal); 566 --table-text-size: inherit; 567 --table-text-color: inherit; 568 --table-column-max-width: none; 569 --table-column-alt-background: var(--table-background); 570 --table-column-first-border-width: var(--table-border-width); 571 --table-column-last-border-width: var(--table-border-width); 572 --table-row-background-hover: var(--table-background); 573 --table-row-alt-background: var(--table-background); 574 --table-row-last-border-width: var(--table-border-width); 575 576 /* Tags */ 577 --tag-size: var(--font-smaller); 578 --tag-color: var(--text-accent); 579 --tag-color-hover: var(--text-accent); 580 --tag-decoration: none; 581 --tag-decoration-hover: none; 582 --tag-background: hsl(var(--interactive-accent-hsl), 0.1); 583 --tag-background-hover: hsl(var(--interactive-accent-hsl), 0.2); 584 --tag-border-color: hsl(var(--interactive-accent-hsl), 0.15); 585 --tag-border-color-hover: hsl(var(--interactive-accent-hsl), 0.15); 586 --tag-border-width: 0px; 587 --tag-padding-x: 0.65em; 588 --tag-padding-y: 0.25em; 589 --tag-radius: 2em; 590 591 /* Window frame */ 592 --titlebar-background: var(--background-secondary); 593 --titlebar-background-focused: var(--background-secondary-alt); 594 --titlebar-border-width: 0px; 595 --titlebar-border-color: var(--background-modifier-border); 596 --titlebar-text-color: var(--text-muted); 597 --titlebar-text-color-focused: var(--text-normal); 598 --titlebar-text-weight: var(--font-bold); 599 600 /* Toggles */ 601 --toggle-border-width: 2px; 602 --toggle-width: 40px; 603 --toggle-radius: 18px; 604 --toggle-thumb-color: white; 605 --toggle-thumb-radius: 18px; 606 --toggle-thumb-height: 18px; 607 --toggle-thumb-width: 18px; 608 --toggle-s-border-width: 2px; 609 --toggle-s-width: 34px; 610 --toggle-s-thumb-height: 15px; 611 --toggle-s-thumb-width: 15px; 612 613 /* Vault name */ 614 --vault-name-font-size: var(--font-ui-small); 615 --vault-name-font-weight: var(--font-medium); 616 --vault-name-color: var(--text-normal); 617 618 /* Workspace */ 619 --workspace-background-translucent: rgb(var(--mono-rgb-0), 0.6); 620 621 /* Color mappings ------------------------ */ 622 623 /* Accent HSL values */ 624 --accent-h: var(--accent-h-theme); 625 --accent-s: var(--accent-s-theme); 626 --accent-l: var(--accent-l-theme); 627 628 /* Backgrounds */ 629 --background-primary: var(--color-base-00); 630 --background-primary-alt: var(--color-base-10); 631 --background-secondary: var(--color-base-20); 632 --background-modifier-hover: rgb(var(--rgb-hover), var(--background-modifier-hover-alpha)); 633 --background-modifier-active: rgb(var(--rgb-hover), var(--background-modifier-active-alpha)); 634 --background-modifier-active-hover: hsl(var(--interactive-accent-hsl), 0.15); 635 --background-modifier-border: var(--color-base-30); 636 --background-modifier-border-hover: var(--color-base-30); 637 --background-modifier-border-focus: var(--color-accent); 638 --background-modifier-error-rgb: var(--color-red-rgb); 639 --background-modifier-error: var(--color-red); 640 --background-modifier-error-hover: var(--color-red); 641 --background-modifier-success-rgb: var(--color-green-rgb); 642 --background-modifier-success: var(--color-green); 643 --background-modifier-message: rgb(0 0 0 / 90%); 644 645 /* Inputs */ 646 --background-modifier-form-field: var(--color-base-25); 647 648 /* Text */ 649 --text-normal: var(--color-base-100); 650 --text-muted: var(--color-base-70); 651 --text-faint: var(--color-base-50); 652 --text-on-accent: white; 653 --text-on-accent-inverted: black; 654 --text-error: var(--color-red); 655 --text-success: var(--color-green); 656 --text-selection: hsl(var(--color-accent-hsl), 0.2); 657 --text-highlight-bg: rgb(255 208 0 / 40%); 658 --text-accent: var(--color-accent); 659 --text-accent-hover: var(--color-accent-2); 660 --interactive-normal: var(--color-base-00); 661 --interactive-hover: var(--color-base-10); 662 --interactive-accent-hsl: var(--color-accent-hsl); 663 --interactive-accent: var(--color-accent-1); 664 --interactive-accent-hover: var(--color-accent-2); 665 } 666 667 .theme-dark { 668 color-scheme: dark; 669 670 --highlight-mix-blend-mode: lighten; 671 --mono-rgb-0: 0, 0, 0; 672 --mono-rgb-100: 255, 255, 255; 673 --rgb-hover: 101, 108, 118; 674 --rgb-active: 101, 108, 118; 675 --color-red-rgb: rgb(248 81 73); 676 --color-red: #f47067; 677 --color-green-rgb: rgb(126 231 135); 678 --color-green: #7ee787; 679 --color-orange: #ffa657; 680 --color-yellow: #d29922; 681 --color-cyan: #a5d6ff; 682 --color-blue: #6cb6ff; 683 --color-purple: #d2a8ff; 684 --color-pink: #f778ba; 685 --color-base-00: #0d1117; 686 --color-base-10: #161b22; 687 --color-base-20: #161b22; 688 --color-base-25: #010409; 689 --color-base-30: #30363d; 690 --color-base-35: #21262d; 691 --color-base-40: #30363d; 692 --color-base-50: #6e7681; 693 --color-base-60: #999; /* Unused */ 694 --color-base-70: #8b949e; 695 --color-base-100: #c9d1d9; 696 --accent-h-theme: 213.67; 697 --accent-s-theme: 92.78%; 698 --accent-l-theme: 61.96%; 699 --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); 700 --color-accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); 701 --color-accent-1: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); 702 --color-accent-2: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 3.8%)); 703 --background-secondary-alt: var(--color-base-25); 704 --background-modifier-box-shadow: rgb(0 0 0 / 30%); 705 --background-modifier-cover: #21283066; 706 --text-highlight-bg: rgb(255 208 0 / 40%); 707 --text-highlight-bg-active: rgb(255 128 0 / 40%); 708 --text-selection: hsl(var(--interactive-accent-hsl), 0.4); 709 --input-shadow: inset 0 0 0 1px #f0f6fc1a; 710 --input-shadow-hover: inset 0 0 0 1px var(--color-base-70); 711 --shadow-s: none; 712 --shadow-l: none; 713 --inline-code-background: #6e768166; 714 --background-modifier-hover-alpha: 0.2; 715 --background-modifier-active-alpha: 0.2; 716 --color-btn-primary-bg: #238636; 717 --color-btn-primary-hover-bg: #2ea043; 718 719 /* Kanban colors */ 720 --kanban-background: var(--background-primary); 721 --kanban-lane-background: var(--background-secondary-alt); 722 --kanban-item-background: var(--background-primary-alt); 723 --kanban-lane-border: var(--color-base-35); 724 --kanban-lane-count: var(--color-base-35); 725 --kanban-options-btn: var(--color-base-30); 726 } 727 728 .is-mobile.theme-dark { 729 --color-base-00: #0d1117; 730 --color-base-10: #161b22; 731 --color-base-20: #161b22; 732 --tag-background: hsl(var(--interactive-accent-hsl), 0.2); 733 --modal-background: var(--background-secondary); 734 --search-result-background: var(--background-secondary); 735 --background-modifier-form-field: var(--background-modifier-border); 736 --background-modifier-cover: #21283066; 737 --background-modifier-hover: rgb(var(--mono-rgb-100), 0.15); 738 --settings-home-background: var(--background-primary); 739 } 740 741 .theme-light { 742 color-scheme: light; 743 744 --highlight-mix-blend-mode: darken; 745 --mono-rgb-0: 255, 255, 255; 746 --mono-rgb-100: 0, 0, 0; 747 --rgb-hover: 129, 139, 152; 748 --rgb-active: 129, 139, 152; 749 --color-red-rgb: rgb(228 55 75); 750 --color-red: #cf222e; 751 --color-green-rgb: rgb(12 181 79); 752 --color-green: #0cb54f; 753 --color-orange: #d96c00; 754 --color-yellow: #bd8e37; 755 --color-cyan: #2db7b5; 756 --color-blue: #086ddd; 757 --color-purple: #876be0; 758 --color-pink: #c32b74; 759 --color-base-00: #fff; 760 --color-base-05: #fcfcfc; 761 --color-base-10: #f6f8fa; 762 --color-base-20: #f6f8fa; 763 --color-base-25: #f6f8fa; 764 --color-base-30: #d0d7de; 765 --color-base-35: #d4d4d4; 766 --color-base-40: #bdbdbd; 767 --color-base-50: #6e7781; 768 --color-base-60: #707070; /* Unused */ 769 --color-base-70: #57606a; 770 --color-base-100: #1f2328; 771 --accent-h-theme: 212.44; 772 --accent-s-theme: 92.07%; 773 --accent-l-theme: 44.51%; 774 --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); 775 --color-accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); 776 --color-accent-1: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 2.5%)); 777 --color-accent-2: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 5%)); 778 --background-secondary-alt: var(--color-base-05); 779 --background-modifier-box-shadow: rgb(0 0 0 / 10%); 780 --background-modifier-cover: #c8d1da66; 781 --text-highlight-bg: rgb(255 208 0 / 40%); 782 --text-highlight-bg-active: rgb(255 128 0 / 40%); 783 --input-shadow: inset 0 0 0 1px #1b1f2426; 784 --input-shadow-hover: inset 0 0 0 1px #1b1f2426; 785 --shadow-s: none; 786 --shadow-l: none; 787 --inline-code-background: #aeb8c133; 788 --background-modifier-hover-alpha: 0.1; 789 --background-modifier-active-alpha: 0.15; 790 --color-btn-primary-bg: #2da44f; 791 --color-btn-primary-hover-bg: #2c964a; 792 793 /* Kanban colors */ 794 --kanban-background: var(--background-primary); 795 --kanban-lane-background: var(--background-primary-alt); 796 --kanban-item-background: var(--background-primary); 797 --kanban-lane-border: #d8dee4; 798 --kanban-lane-count: #aeb8c133; 799 --kanban-options-btn: var(--background-primary-alt); 800 } 801 802 body.colorblind_protan-deutan.theme-dark { 803 --color-red-rgb: rgb(253 172 84); 804 --color-red: #fdac54; 805 --color-green-rgb: rgb(165 214 255); 806 --color-green: #a3d6ff; 807 --color-orange: #fdac54; 808 --color-btn-primary-bg: #1f6feb; 809 --color-btn-primary-hover-bg: #388bfd; 810 } 811 812 body.colorblind_protan-deutan.theme-light { 813 --color-red-rgb: rgb(179 89 0); 814 --color-red: #b35900; 815 --color-green-rgb: rgb(33 139 255); 816 --color-green: #218bff; 817 --color-orange: #dd7815; 818 --color-btn-primary-bg: #218bff; 819 --color-btn-primary-hover-bg: #0969da; 820 } 821 822 body.colorblind_tritan.theme-dark { 823 --color-green-rgb: rgb(165 214 255); 824 --color-green: #a5d6ff; 825 --color-orange: #ffa198; 826 --text-highlight-bg: rgb(255 0 0 / 40%); 827 --text-highlight-bg-active: rgb(255 50 0 / 40%); 828 --color-btn-primary-bg: #1f6feb; 829 --color-btn-primary-hover-bg: #388bfd; 830 } 831 832 body.colorblind_tritan.theme-light { 833 --color-green-rgb: rgb(12 181 79); 834 --color-green: #218bff; 835 --color-orange: #fa4549; 836 --text-highlight-bg: rgb(255 0 0 / 40%); 837 --text-highlight-bg-active: rgb(255 50 0 / 40%); 838 --color-btn-primary-bg: #218bff; 839 --color-btn-primary-hover-bg: #0969da; 840 } 841 842 /* Octicons: https://primer.style/octicons/ * 843 Generate font with svg: https://icomoon.io/app/#/select/font 844 Covert font to base64: https://www.selfcv.com/tools/convert-ttf-to-base64/ 845 Encode: caution: e900, warning: e901, tip: e902, note: e903, important: e904 */ 846 @font-face { 847 font-family: gfm-alert-icon; 848 src: url('data:font/ttf;base64,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'); 849 } 850 851 /* Markdown Body */ 852 .markdown-rendered { 853 --base-size-112: 7rem; 854 --base-size-12: 0.75rem; 855 --base-size-128: 8rem; 856 --base-size-16: 1rem; 857 --base-size-2: 0.125rem; 858 --base-size-20: 1.25rem; 859 --base-size-24: 1.5rem; 860 --base-size-28: 1.75rem; 861 --base-size-32: 2rem; 862 --base-size-36: 2.25rem; 863 --base-size-4: 0.25rem; 864 --base-size-40: 2.5rem; 865 --base-size-44: 2.75rem; 866 --base-size-48: 3rem; 867 --base-size-6: 0.375rem; 868 --base-size-64: 4rem; 869 --base-size-8: 0.5rem; 870 --base-size-80: 5rem; 871 --base-size-96: 6rem; 872 --fontStack-monospace: 873 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; 874 --fontStack-sansSerif: 875 'Mona Sans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, 876 sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; 877 --fontStack-sansSerifDisplay: 878 'Mona Sans VF', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Noto Sans', helvetica, arial, 879 sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; 880 --fontStack-system: 881 'Mona Sans VF', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Noto Sans', helvetica, arial, 882 sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; 883 884 /* override obsidian default */ 885 --heading-spacing: var(--base-size-24); 886 887 font-family: var(--fontStack-sansSerif); 888 color: var(--fgColor-default); 889 } 890 891 .theme-light .markdown-source-view, 892 .theme-light .markdown-rendered { 893 color-scheme: light; 894 895 --fgColor-danger: #d1242f; 896 --bgColor-attention-muted: #fff8c5; 897 --bgColor-muted: #f6f8fa; 898 --bgColor-neutral-muted: #818b981f; 899 --bgColor-danger-muted: #ffebe9; 900 --borderColor-accent-emphasis: #0969da; 901 --borderColor-attention-emphasis: #9a6700; 902 --borderColor-danger-emphasis: #cf222e; 903 --borderColor-default: #d1d9e0; 904 --borderColor-done-emphasis: #8250df; 905 --borderColor-success-emphasis: #1a7f37; 906 --color-prettylights-syntax-brackethighlighter-angle: #59636e; 907 --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; 908 --color-prettylights-syntax-carriage-return-bg: #cf222e; 909 --color-prettylights-syntax-carriage-return-text: #f6f8fa; 910 --color-prettylights-syntax-comment: #59636e; 911 --color-prettylights-syntax-constant: #0550ae; 912 --color-prettylights-syntax-constant-other-reference-link: #0a3069; 913 --color-prettylights-syntax-entity: #6639ba; 914 --color-prettylights-syntax-entity-tag: #0550ae; 915 --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger); 916 --color-prettylights-syntax-keyword: #cf222e; 917 --color-prettylights-syntax-markup-changed-bg: #ffd8b5; 918 --color-prettylights-syntax-markup-changed-text: #953800; 919 --color-prettylights-syntax-markup-deleted-bg: #ffebe9; 920 --color-prettylights-syntax-markup-deleted-text: #82071e; 921 --color-prettylights-syntax-markup-heading: #0550ae; 922 --color-prettylights-syntax-markup-ignored-bg: #0550ae; 923 --color-prettylights-syntax-markup-ignored-text: #d1d9e0; 924 --color-prettylights-syntax-markup-inserted-bg: #dafbe1; 925 --color-prettylights-syntax-markup-inserted-text: #116329; 926 --color-prettylights-syntax-markup-list: #3b2300; 927 --color-prettylights-syntax-meta-diff-range: #8250df; 928 --color-prettylights-syntax-string: #0a3069; 929 --color-prettylights-syntax-string-regexp: #116329; 930 --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98; 931 --color-prettylights-syntax-variable: #953800; 932 --fgColor-accent: #0969da; 933 --fgColor-attention: #9a6700; 934 --fgColor-done: #8250df; 935 --fgColor-muted: #59636e; 936 --fgColor-success: #1a7f37; 937 --bgColor-default: #fff; 938 --borderColor-muted: #d1d9e0b3; 939 --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted); 940 --color-prettylights-syntax-markup-bold: #1f2328; 941 --color-prettylights-syntax-markup-italic: #1f2328; 942 --color-prettylights-syntax-storage-modifier-import: #1f2328; 943 --fgColor-default: #1f2328; 944 --focus-outlineColor: var(--borderColor-accent-emphasis); 945 --borderColor-neutral-muted: var(--borderColor-muted); 946 } 947 948 .theme-dark .markdown-source-view, 949 .theme-dark .markdown-rendered { 950 color-scheme: dark; 951 952 --fgColor-accent: #4493f8; 953 --bgColor-attention-muted: #bb800926; 954 --bgColor-default: #0d1117; 955 --bgColor-muted: #151b23; 956 --bgColor-neutral-muted: #656c7633; 957 --bgColor-danger-muted: #f851491a; 958 --borderColor-accent-emphasis: #1f6feb; 959 --borderColor-attention-emphasis: #9e6a03; 960 --borderColor-danger-emphasis: #da3633; 961 --borderColor-default: #3d444d; 962 --borderColor-done-emphasis: #8957e5; 963 --borderColor-success-emphasis: #238636; 964 --color-prettylights-syntax-brackethighlighter-angle: #9198a1; 965 --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; 966 --color-prettylights-syntax-carriage-return-bg: #b62324; 967 --color-prettylights-syntax-carriage-return-text: #f0f6fc; 968 --color-prettylights-syntax-comment: #9198a1; 969 --color-prettylights-syntax-constant: #79c0ff; 970 --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; 971 --color-prettylights-syntax-entity: #d2a8ff; 972 --color-prettylights-syntax-entity-tag: #7ee787; 973 --color-prettylights-syntax-keyword: #ff7b72; 974 --color-prettylights-syntax-markup-bold: #f0f6fc; 975 --color-prettylights-syntax-markup-changed-bg: #5a1e02; 976 --color-prettylights-syntax-markup-changed-text: #ffdfb6; 977 --color-prettylights-syntax-markup-deleted-bg: #67060c; 978 --color-prettylights-syntax-markup-deleted-text: #ffdcd7; 979 --color-prettylights-syntax-markup-heading: #1f6feb; 980 --color-prettylights-syntax-markup-ignored-bg: #1158c7; 981 --color-prettylights-syntax-markup-ignored-text: #f0f6fc; 982 --color-prettylights-syntax-markup-inserted-bg: #033a16; 983 --color-prettylights-syntax-markup-inserted-text: #aff5b4; 984 --color-prettylights-syntax-markup-italic: #f0f6fc; 985 --color-prettylights-syntax-markup-list: #f2cc60; 986 --color-prettylights-syntax-meta-diff-range: #d2a8ff; 987 --color-prettylights-syntax-storage-modifier-import: #f0f6fc; 988 --color-prettylights-syntax-string: #a5d6ff; 989 --color-prettylights-syntax-string-regexp: #7ee787; 990 --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d; 991 --color-prettylights-syntax-variable: #ffa657; 992 --fgColor-attention: #d29922; 993 --fgColor-danger: #f85149; 994 --fgColor-default: #f0f6fc; 995 --fgColor-done: #ab7df8; 996 --fgColor-muted: #9198a1; 997 --fgColor-success: #3fb950; 998 --borderColor-muted: #3d444db3; 999 --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted); 1000 --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger); 1001 --focus-outlineColor: var(--borderColor-accent-emphasis); 1002 --borderColor-neutral-muted: var(--borderColor-muted); 1003 } 1004 1005 .markdown-rendered a { 1006 padding-inline-end: 0; 1007 color: var(--fgColor-accent); 1008 text-decoration: underline; 1009 text-underline-offset: 0.2rem; 1010 background-image: unset; 1011 } 1012 1013 .markdown-rendered a.tag { 1014 padding: var(--tag-padding-y) var(--tag-padding-x); 1015 text-decoration: none; 1016 } 1017 1018 .markdown-rendered blockquote a strong { 1019 color: var(--fgColor-accent); 1020 } 1021 1022 .markdown-rendered .internal-link { 1023 text-decoration: underline; 1024 } 1025 1026 .markdown-rendered pre { 1027 background-color: var(--bgColor-muted); 1028 } 1029 1030 .markdown-rendered :not(pre) > code { 1031 padding: 0.2em 0.4em; 1032 font-size: 85%; 1033 color: var(--fgColor-default); 1034 background-color: var(--bgColor-neutral-muted); 1035 border-radius: 6px; 1036 } 1037 1038 .markdown-rendered blockquote strong, 1039 .markdown-rendered blockquote code { 1040 color: var(--fgColor-muted); 1041 } 1042 1043 .markdown-rendered :not(pre) a code { 1044 color: var(--fgColor-accent); 1045 } 1046 1047 .markdown-source-view.is-live-preview kbd, 1048 .markdown-rendered kbd { 1049 display: inline-block; 1050 max-width: 100%; 1051 padding: var(--base-size-4, 0.25rem); 1052 font: 11px 1053 var( 1054 --fontStack-monospace, 1055 ui-monospace, 1056 SFMono-Regular, 1057 SF Mono, 1058 Menlo, 1059 Consolas, 1060 Liberation Mono, 1061 monospace 1062 ); 1063 line-height: 10px; 1064 vertical-align: middle; 1065 color: var(--fgColor-default, var(--color-fg-default)); 1066 background-color: var(--bgColor-muted, var(--color-canvas-subtle)); 1067 border: solid 1px var(--borderColor-neutral-muted, var(--color-neutral-muted)); 1068 border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted)); 1069 border-radius: 6px; 1070 box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted)); 1071 } 1072 1073 .markdown-rendered blockquote { 1074 padding-inline-start: 1em; 1075 color: var(--fgColor-muted); 1076 border-inline-start: 0.25em solid var(--borderColor-default); 1077 } 1078 1079 /* Tables */ 1080 .markdown-rendered td, 1081 .markdown-rendered th { 1082 padding: var(--size-2-3) var(--size-4-3); 1083 } 1084 1085 .markdown-rendered th { 1086 text-align: center; 1087 } 1088 1089 .markdown-rendered tbody tr:nth-child(2n) { 1090 background-color: var(--background-secondary); 1091 } 1092 1093 .markdown-rendered ol > li { 1094 margin-block-start: var(--base-size-16); 1095 } 1096 1097 .markdown-rendered li + li { 1098 margin-top: 0.25em; 1099 } 1100 1101 .markdown-rendered .footnotes { 1102 font-size: 12px; 1103 color: var(--fgColor-muted); 1104 } 1105 1106 .markdown-rendered .footnotes :not(pre) > code { 1107 color: var(--fgColor-muted); 1108 } 1109 1110 .markdown-rendered .footnotes p { 1111 margin-block: 0 var(--base-size-16); 1112 } 1113 1114 .markdown-rendered .footnotes ol > li { 1115 margin-inline-start: var(--base-size-16); 1116 } 1117 1118 .markdown-rendered .footnotes > hr:first-of-type { 1119 margin: var(--base-size-16) 0; 1120 border-top: 1px solid var(--borderColor-default); 1121 } 1122 1123 .markdown-rendered .footnotes ol > li::marker, 1124 .markdown-rendered .footnotes ul > li::marker { 1125 color: var(--fgColor-muted); 1126 } 1127 1128 .markdown-rendered .footnotes li + li { 1129 margin-top: var(--base-size-16); 1130 } 1131 1132 /* Buttons */ 1133 button { 1134 transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); 1135 } 1136 1137 button.mod-cta { 1138 color: var(--text-on-accent); 1139 background-color: var(--color-btn-primary-bg); 1140 } 1141 1142 button.mod-cta:hover { 1143 background-color: var(--color-btn-primary-hover-bg); 1144 } 1145 1146 /* Alerts (Callouts) */ 1147 .markdown-rendered .callout { 1148 --callout-radius: 0; 1149 --callout-border-width: 0; 1150 --callout-padding: 0 1em; 1151 1152 padding-block: var(--base-size-8); 1153 padding-inline: var(--base-size-16); 1154 color: var(--fgColor-default); 1155 background-color: transparent; 1156 border-inline-start: 0.25em solid var(--borderColor-default); 1157 } 1158 1159 .markdown-rendered .callout .callout-title { 1160 gap: var(--base-size-8); 1161 margin-block-end: var(--base-size-16); 1162 } 1163 1164 .markdown-rendered .callout .callout-title-inner { 1165 font-weight: var(--font-medium); 1166 } 1167 1168 .markdown-rendered .callout[data-callout='note'] { 1169 border-inline-start: 0.25em solid var(--borderColor-accent-emphasis); 1170 } 1171 1172 .markdown-rendered .callout[data-callout='note'] .callout-icon, 1173 .markdown-rendered .callout[data-callout='note'] .callout-title-inner { 1174 color: var(--fgColor-accent); 1175 } 1176 1177 .markdown-rendered .callout[data-callout='tip'] { 1178 border-inline-start: 0.25em solid var(--borderColor-success-emphasis); 1179 } 1180 1181 .markdown-rendered .callout[data-callout='tip'] .callout-icon, 1182 .markdown-rendered .callout[data-callout='tip'] .callout-title-inner { 1183 color: var(--fgColor-success); 1184 } 1185 1186 .markdown-rendered .callout[data-callout='important'] { 1187 border-inline-start: 0.25em solid var(--borderColor-done-emphasis); 1188 } 1189 1190 .markdown-rendered .callout[data-callout='important'] .callout-icon, 1191 .markdown-rendered .callout[data-callout='important'] .callout-title-inner { 1192 color: var(--fgColor-done); 1193 } 1194 1195 .markdown-rendered .callout[data-callout='warning'] { 1196 border-inline-start: 0.25em solid var(--borderColor-attention-emphasis); 1197 } 1198 1199 .markdown-rendered .callout[data-callout='warning'] .callout-icon, 1200 .markdown-rendered .callout[data-callout='warning'] .callout-title-inner { 1201 color: var(--fgColor-attention); 1202 } 1203 1204 .markdown-rendered .callout[data-callout='caution'] { 1205 border-inline-start: 0.25em solid var(--borderColor-danger-emphasis); 1206 } 1207 1208 .markdown-rendered .callout[data-callout='caution'] .callout-icon, 1209 .markdown-rendered .callout[data-callout='caution'] .callout-title-inner { 1210 color: var(--fgColor-danger); 1211 } 1212 1213 .markdown-rendered .callout-content p { 1214 margin-block: 0 var(--base-size-16); 1215 } 1216 1217 .markdown-rendered .callout-content > :first-child { 1218 margin-top: 0; 1219 } 1220 1221 .markdown-rendered .callout-content > :last-child { 1222 margin-bottom: 0; 1223 } 1224 1225 /* disable original callout icon */ 1226 .markdown-rendered .callout-icon > svg { 1227 display: none; 1228 } 1229 1230 .markdown-rendered .callout-icon { 1231 width: var(--icon-s); 1232 height: var(--icon-s); 1233 } 1234 1235 .markdown-rendered .callout .callout-icon::before { 1236 width: var(--icon-s); 1237 height: var(--icon-s); 1238 font-family: gfm-alert-icon; 1239 font-size: var(--base-size-16); 1240 content: ''; 1241 } 1242 1243 .markdown-rendered .callout[data-callout='note'] .callout-icon::before { 1244 content: '\e903'; 1245 } 1246 1247 .markdown-rendered .callout[data-callout='tip'] .callout-icon::before { 1248 content: '\e902'; 1249 } 1250 1251 .markdown-rendered .callout[data-callout='important'] .callout-icon::before { 1252 content: '\e904'; 1253 } 1254 1255 .markdown-rendered .callout[data-callout='warning'] .callout-icon::before { 1256 content: '\e901'; 1257 } 1258 1259 .markdown-rendered .callout[data-callout='caution'] .callout-icon::before { 1260 content: '\e900'; 1261 } 1262 1263 /* Mermaid */ 1264 .markdown-rendered .mermaid { 1265 margin-block-end: var(--base-size-16); 1266 } 1267 1268 .markdown-rendered .mermaid > svg { 1269 display: block; 1270 margin-inline: auto; 1271 } 1272 1273 /* Markdown Heading */ 1274 .markdown-rendered h1, 1275 .markdown-rendered h2, 1276 .markdown-rendered h3, 1277 .markdown-rendered h4, 1278 .markdown-rendered h5, 1279 .markdown-rendered h6 { 1280 margin-block: var(--base-size-24) var(--base-size-16); 1281 color: var(--fgColor-default); 1282 } 1283 1284 .markdown-rendered h1, 1285 .markdown-rendered h2 { 1286 padding-bottom: 0.3em; 1287 border-bottom: 1px solid var(--borderColor-muted); 1288 } 1289 1290 .markdown-rendered h6 { 1291 color: var(--fgColor-muted); 1292 } 1293 1294 /* Markdown hr */ 1295 .markdown-rendered hr { 1296 margin-block: var(--base-size-24); 1297 } 1298 1299 /* Task List */ 1300 ul > li.task-list-item[data-task='x'], 1301 ul > li.task-list-item[data-task='X'] { 1302 color: var(--fgColor-default); 1303 text-decoration: initial; 1304 } 1305 1306 /* Kanban-common */ 1307 .kanban-plugin { 1308 --lane-width: 348px; 1309 } 1310 1311 body.theme-light .kanban-plugin__lane-items > div { 1312 box-shadow: rgb(140 149 159 / 15%) 0 3px 6px; 1313 } 1314 1315 /* Kanban-same-height-cards */ 1316 body.kanban-same-height-cards .kanban-plugin__item-content-wrapper, 1317 body.kanban-same-height-cards .kanban-plugin__item-title-wrapper { 1318 min-height: 68px; 1319 } 1320 1321 /* Kanban-full-height-column */ 1322 body.kanban-full-height-column button.kanban-plugin__new-item-button { 1323 align-self: flex-end; 1324 } 1325 1326 body.kanban-full-height-column .kanban-plugin__item-button-wrapper { 1327 display: flex; 1328 flex-grow: 1; 1329 } 1330 1331 body.kanban-full-height-column .kanban-plugin__lane-wrapper { 1332 min-height: 100%; 1333 } 1334 1335 /* Kanban-Minimal */ 1336 body.kanban-on .kanban-plugin { 1337 background-color: var(--kanban-background); 1338 } 1339 1340 body.kanban-on .kanban-plugin__lane { 1341 background-color: var(--kanban-lane-background); 1342 border: 1px solid var(--kanban-lane-border); 1343 } 1344 1345 body.kanban-on .kanban-plugin__lane-title { 1346 flex-grow: 0; 1347 width: fit-content; 1348 } 1349 1350 body.kanban-on .kanban-plugin__item-content-wrapper, 1351 body.kanban-on .kanban-plugin__item-title-wrapper, 1352 body.kanban-on .kanban-plugin__item-metadata-wrapper:not(:empty) { 1353 background: var(--kanban-item-background); 1354 } 1355 1356 body.kanban-on .kanban-plugin__icon > svg { 1357 transform: rotate(90deg); 1358 } 1359 1360 body.kanban-on .kanban-plugin__lane-settings-button-wrapper { 1361 margin-left: auto; 1362 } 1363 1364 body.kanban-on div.kanban-plugin__lane-title-count { 1365 padding: 2px 5px; 1366 background-color: var(--kanban-lane-count); 1367 border-radius: 1em; 1368 } 1369 1370 body.kanban-on .kanban-plugin__item button.kanban-plugin__item-prefix-button, 1371 body.kanban-on .kanban-plugin__item button.kanban-plugin__item-postfix-button, 1372 body.kanban-on .kanban-plugin__lane button.kanban-plugin__lane-settings-button { 1373 height: 24px; 1374 padding: 0 5px; 1375 box-shadow: none; 1376 } 1377 1378 body.kanban-on .kanban-plugin__item button.kanban-plugin__item-prefix-button:hover, 1379 body.kanban-on .kanban-plugin__item button.kanban-plugin__item-postfix-button:hover, 1380 body.kanban-on .kanban-plugin__lane button.kanban-plugin__lane-settings-button:hover { 1381 cursor: pointer; 1382 background-color: var(--kanban-options-btn); 1383 } 1384 1385 body.kanban-on button.kanban-plugin__new-item-button { 1386 justify-content: flex-start; 1387 border: none; 1388 } 1389 1390 body.kanban-on .kanban-plugin__new-item-button:hover { 1391 color: var(--text-normal); 1392 background-color: inherit; 1393 box-shadow: none; 1394 } 1395 1396 body.kanban-on .kanban-plugin__lane-items { 1397 padding: 8px 15px; 1398 } 1399 1400 body.kanban-on .kanban-plugin__item-prefix-button-wrapper input[type='checkbox'] { 1401 filter: none; 1402 } 1403 1404 /* Kanban-Full */ 1405 1406 /* Main color */ 1407 body.kanban-full .kanban-plugin { 1408 background-color: var(--kanban-background); 1409 } 1410 1411 /* LANE */ 1412 1413 /* Colors */ 1414 body.kanban-full .kanban-plugin__lane { 1415 background-color: var(--kanban-lane-background); 1416 border: 1px solid var(--kanban-lane-border); 1417 } 1418 1419 /* Grip icon hiding */ 1420 body.kanban-full .kanban-plugin__lane-grip { 1421 position: absolute; 1422 z-index: 0; 1423 width: calc(var(--lane-width) - 1em); 1424 height: 3em; 1425 margin: 0; 1426 cursor: default; 1427 opacity: 0; 1428 } 1429 1430 body.kanban-full .kanban-plugin__lane-header-wrapper div { 1431 z-index: 1; 1432 } 1433 1434 /* Header */ 1435 body.kanban-full .kanban-plugin__lane-header-wrapper { 1436 padding-left: 14px; 1437 } 1438 1439 body.kanban-full .kanban-plugin__markdown-preview-view { 1440 font-size: inherit; 1441 } 1442 1443 /* Header + Counter */ 1444 body.kanban-full .kanban-plugin__lane-title { 1445 flex-grow: 0; 1446 width: fit-content; 1447 font-size: 1em; 1448 } 1449 1450 /* Counter */ 1451 body.kanban-full div.kanban-plugin__lane-title-count { 1452 padding: 2px 5px; 1453 background-color: var(--kanban-lane-count); 1454 border-radius: 1em; 1455 } 1456 1457 /* Three dot position */ 1458 body.kanban-full .kanban-plugin__lane-settings-button-wrapper { 1459 margin-left: auto; 1460 } 1461 1462 /* Cards padding */ 1463 body.kanban-full .kanban-plugin__lane-items { 1464 padding: 2px 6px; 1465 } 1466 1467 /* ITEM */ 1468 1469 /* Colors */ 1470 body.kanban-full .kanban-plugin__item-content-wrapper, 1471 body.kanban-full .kanban-plugin__item-title-wrapper, 1472 body.kanban-full .kanban-plugin__item-metadata-wrapper:not(:empty) { 1473 background: var(--kanban-item-background); 1474 } 1475 1476 body.kanban-full .kanban-plugin__item { 1477 border-color: var(--kanban-lane-border); 1478 } 1479 1480 /* Between items */ 1481 body.kanban-full .kanban-plugin__lane-items > div { 1482 margin-top: 0; 1483 margin-bottom: 8px; 1484 } 1485 1486 /* Borders */ 1487 body.kanban-full .kanban-plugin__lane-header-wrapper, 1488 body.kanban-full .kanban-plugin__item-button-wrapper, 1489 body.kanban-full .kanban-plugin__item-form { 1490 border: none; 1491 } 1492 1493 /* Content */ 1494 body.kanban-full .kanban-plugin__item-title-wrapper { 1495 padding: 12px 12px 12px 0; 1496 } 1497 1498 body.kanban-full .kanban-plugin__item-title, 1499 body.kanban-full .kanban-plugin__item-input-wrapper { 1500 padding-left: 12px; 1501 } 1502 1503 /* Archive/checkbox */ 1504 body.kanban-full .kanban-plugin__item-prefix-button-wrapper { 1505 align-self: center; 1506 margin-left: 5px; 1507 } 1508 1509 /* Time Date Buttons */ 1510 body.kanban-full .kanban-plugin__item-metadata .is-button:hover { 1511 color: var(--text-normal); 1512 cursor: var(--cursor-link); 1513 } 1514 1515 /* THREE DOT BUTTON */ 1516 1517 /* Rotation */ 1518 body.kanban-full .kanban-plugin__icon > svg { 1519 transform: rotate(90deg); 1520 } 1521 1522 /* Size */ 1523 body.kanban-full .kanban-plugin__icon { 1524 font-size: 1.4em; 1525 } 1526 1527 /* Item */ 1528 body.kanban-full .kanban-plugin__item-postfix-button.clickable-icon { 1529 opacity: 0; 1530 } 1531 1532 body.kanban-full .kanban-plugin__item:hover .kanban-plugin__item-postfix-button.clickable-icon { 1533 opacity: 1; 1534 } 1535 1536 /* ADD A CARD BUTTON */ 1537 1538 /* Position */ 1539 body.kanban-full .kanban-plugin__new-item-button { 1540 justify-content: flex-start; 1541 padding-left: 0; 1542 border: none; 1543 box-shadow: none; 1544 } 1545 1546 /* + Size */ 1547 body.kanban-full .kanban-plugin__item-button-plus { 1548 height: inherit; 1549 margin-right: 8px; 1550 font-size: 1.9em; 1551 } 1552 1553 /* Hover */ 1554 body.kanban-full .kanban-plugin__new-item-button:hover { 1555 color: var(--text-muted); 1556 background-color: inherit; 1557 box-shadow: none; 1558 } 1559 1560 /* HOVER EDITOR PLUGIN */ 1561 1562 /* Add borders */ 1563 .popover.hover-editor > .popover-content { 1564 border: var(--border-width) var(--color-base-30) solid; 1565 box-shadow: 0 0 10px 3px var(--background-modifier-box-shadow); 1566 } 1567 1568 /* FIXIES */ 1569 body.kanban-full .kanban-plugin__item-prefix-button-wrapper input[type='checkbox'] { 1570 margin: 3px; 1571 filter: none; 1572 } 1573 1574 body.kanban-full .kanban-plugin__markdown-preview-view > div > * { 1575 overflow-x: unset; 1576 } 1577 1578 /* fix: input borders */ 1579 textarea:active, 1580 input[type='text']:active, 1581 input[type='search']:active, 1582 input[type='email']:active, 1583 input[type='password']:active, 1584 input[type='number']:active, 1585 textarea:focus, 1586 input[type='text']:focus, 1587 input[type='search']:focus, 1588 input[type='email']:focus, 1589 input[type='password']:focus, 1590 input[type='number']:focus, 1591 textarea:focus-visible, 1592 input[type='text']:focus-visible, 1593 input[type='search']:focus-visible, 1594 input[type='email']:focus-visible, 1595 input[type='password']:focus-visible, 1596 input[type='number']:focus-visible { 1597 box-shadow: 0 0 0 1px var(--background-modifier-border-focus); 1598 } 1599 1600 select:focus, 1601 .dropdown:focus { 1602 box-shadow: 0 0 0 2px var(--background-modifier-border-focus); 1603 } 1604 1605 /* ------------- Live Preview Mode ------------------ */ 1606 1607 .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote::before { 1608 padding-inline-start: 1em; 1609 color: var(--fgColor-muted); 1610 border-inline-start: 0.25em solid var(--borderColor-muted); 1611 } 1612 1613 .cm-s-obsidian span.cm-quote { 1614 color: var(--fgColor-muted); 1615 } 1616 1617 @media (hover: hover) { 1618 .markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget, .cm-lang-base):hover { 1619 border-radius: 0; 1620 box-shadow: 1621 0 0 0 1px var(--borderColor-muted), 1622 inset 0 0 0 1px var(--borderColor-muted); 1623 } 1624 } 1625 1626 .markdown-source-view.is-live-preview .external-link { 1627 padding-inline-end: 0; 1628 background-image: unset; 1629 } 1630 1631 .markdown-source-view.mod-cm6 .cm-link .cm-underline, 1632 .markdown-source-view.mod-cm6 .cm-url .cm-underline { 1633 color: var(--fgColor-accent); 1634 text-decoration: underline; 1635 text-underline-offset: 0.2rem; 1636 } 1637 1638 @media (hover: hover) { 1639 .markdown-source-view.mod-cm6 .cm-link .cm-underline:hover, 1640 .markdown-source-view.mod-cm6 .cm-url .cm-underline:hover { 1641 color: var(--fgColor-accent); 1642 text-decoration: underline; 1643 text-underline-offset: 0.2rem; 1644 } 1645 } 1646 1647 @media (hover: hover) { 1648 .cm-s-obsidian span.cm-link:hover { 1649 text-underline-offset: 0.2rem; 1650 } 1651 } 1652 1653 @media (hover: hover) { 1654 a:hover { 1655 text-underline-offset: 0.2rem; 1656 } 1657 } 1658 1659 @media (hover: hover) { 1660 .cm-s-obsidian span.cm-formatting-link.cm-url:hover, 1661 .cm-s-obsidian span.cm-url:hover { 1662 color: var(--fgColor-accent); 1663 text-decoration: underline; 1664 text-underline-offset: 0.2rem; 1665 } 1666 } 1667 1668 .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task='x'], 1669 .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task='X'] { 1670 color: var(--fgColor-default); 1671 text-decoration: initial; 1672 } 1673 1674 .markdown-source-view.is-live-preview .HyperMD-header-1, 1675 .markdown-source-view.is-live-preview .HyperMD-header-2 { 1676 padding-bottom: 0.3em; 1677 border-bottom: 1px solid var(--borderColor-muted); 1678 } 1679 1680 .markdown-source-view.is-live-preview .HyperMD-header-1, 1681 .markdown-source-view.is-live-preview .HyperMD-header-2, 1682 .markdown-source-view.is-live-preview .HyperMD-header-3, 1683 .markdown-source-view.is-live-preview .HyperMD-header-4, 1684 .markdown-source-view.is-live-preview .HyperMD-header-5, 1685 .markdown-source-view.is-live-preview .HyperMD-header-6 { 1686 /* margin-block: var(--base-size-24, 1.5rem) var(--base-size-16, 1rem) !important; */ 1687 color: var(--fgColor-default); 1688 } 1689 1690 .cm-s-obsidian span.cm-inline-code { 1691 padding: 0.2em 0.4em; 1692 font-size: 85%; 1693 color: var(--fgColor-default); 1694 background-color: var(--bgColor-neutral-muted); 1695 border-radius: 6px; 1696 } 1697 1698 /* .cm-s-obsidian span.cm-formatting.cm-formatting-code { 1699 color: var(--code-normal); 1700 } */ 1701 1702 /* Preview Mode quote code */ 1703 .cm-s-obsidian .HyperMD-quote .cm-inline-code:not(.cm-formatting) { 1704 color: var(--fgColor-muted); 1705 } 1706 1707 /* Edit Mode quote code */ 1708 .cm-s-obsidian .HyperMD-quote .cm-inline-code.cm-formatting, 1709 .cm-s-obsidian .HyperMD-quote .cm-inline-code.cm-formatting ~ .cm-inline-code:not(.cm-formatting) { 1710 color: var(--fgColor-muted); 1711 } 1712 1713 /* ------------- Other Panel ------------------ */ 1714 .external-link { 1715 padding-inline-end: 0; 1716 text-underline-offset: 0.2rem; 1717 background-image: unset; 1718 } 1719 1720 /* Settings */ 1721 body:not(.is-phone) .horizontal-tab-nav-item.is-active, 1722 body:not(.is-phone) .vertical-tab-nav-item.is-active { 1723 background-color: var(--background-modifier-active); 1724 }